$item_width: 1rem;
$item_height: 1.7rem;

.rain-wrapper {
	height: 100%;
	background: #95837f;

	.rain-item {
		position: absolute;
	    width: $item_width;
	    height: $item_height;
	    top: -$item_height;
	    right: 0;
	    transform: rotate(30deg);

	    background: #e21864;

	    &.active {
	    	background: #99cf17;
	    }

	    &.index0 {
	    	right: -$item_width*3;
	    }

	    &.index1,
	    &.item8 {
	    	right: -$item_width*2;
	    }

	    &.index2 {
	    	right: 0;
	    }

	    &.index3,
	    &.index6 {
	    	right: -$item_width*2.7;
	    	top: $item_height*0.57;
	    }

	    &.index4,
	    &.index5 {
	    	right: -$item_width*2.7;
	    	top: 2*$item_height;
	    }

	}
}